<!--  -->
<template>
    <div class='Login'>
        <el-button @click="$store.commit('add')">点击加一</el-button>
        <el-button @click="addNumClick">点击加指定数</el-button>
        <div class="form">
            <h2>{{ $store.state.count }}登录 {{ myCount }} 页面{{ count }}</h2>
            <p>{{ $store.getters.dbCount }}------{{ dbCount }}</p>
            <el-input minlength="1" v-model="formData.adminname" placeholder="请输入用户名" class="name">
                <!-- 插槽 前缀图标 #是v-slot -->
                <template #prefix>
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                </template>
            </el-input>
            <el-input clearable show-password v-model="formData.password" placeholder="请输入密码" class="psw">
                <template #prefix>
                    <el-icon>
                        <Lock />
                    </el-icon>
                </template>
            </el-input>
            <el-button class="login-btn" @click="loginClick">登录</el-button>
        </div>
        <el-button type="primary" @click="$store.dispatch('asyncAdd')">异步修改</el-button>
        <el-button type="primary" @click="asyncAddNumClick">异步修改指定数</el-button>
    </div>
</template>

<script>
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import md5 from 'md5'
import axios from 'axios'
import { loginFn } from '@/api/user'
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
export default {

    data() {
        return {
            formData: {
                adminname: "",
                password: ""
            }
        }
    },
    computed: {
        ...mapState(['count']),
        ...mapGetters(['dbCount']),
        myCount() {
            return this.$store.state.count
        }
    },
    methods: {
        ...mapMutations(['addNum']),
        ...mapActions(['asyncAddNum']),
        loginClick() {
            // 用户名验证
            // if(this.formData.adminname.length<6){
            //     ElMessage.error('用户名不能少于6位')
            // }
            // 密码验证
            // const reg=/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
            // if(!reg.test(this.formData.password)){
            //     ElMessage.error('最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符')
            // }
            // 密码加密
            // this.formData.password=md5('你好'+this.formData.password+'中国666')
            // console.log(this.formData.password);

            // 提交数据请求
            // axios.post('http://10.31.155.245:3000/admin/admin/login',this.formData).then(res=>{ 
            //     console.log(res);

            // })
            loginFn(this.formData).then(res => {
                // if(res.data){
                // 保存用户信息
                this.$store.commit('updateUserInfo', res.data)
                // 登录成功进入首页
                this.$router.push('/')
                console.log(res);
                // }else{
                //     ElMessage.error('用户名或密码错误')
                // }
            })
        },
        addNumClick() {
            // 方法一
            // this.$store.commit('addNum',10)
            // 方法二
            this.addNum(5)
            // 方法三
            //直接在ui界面$store.commit('addNum',10)
        },
        asyncAddNumClick() {
            // this.$store.dispatch('asyncAddNum',8)
            this.asyncAddNum(7)
        },
    },
    components: {
        UserFilled,
        Lock
    }
}
</script>
<style lang='scss' scoped>
.Login {
    height: 100%;
    background-image: url('https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231015/4/20/10892e1a2fdb1d2d6371eb60db6d74b9.jpg');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .form {
        min-width: 300px;
        width: 450px;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;

        h2 {
            text-align: center;
        }

        .psw {
            margin: 20px 0;
        }

        .login-btn {
            background-color: #6cf;
            color: #fff;
        }
    }
}
</style>